<template>
    <div id="main">
        
    </div>
</template>

<script>
import * as echarts from "echarts";
import { reactive } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
export default {
    setup() {
        const option = reactive({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        })

        onMounted(() => {
            const chartDom = document.getElementById('main');
            const myChart = echarts.init(chartDom);
            myChart.setOption(option)
        })
    }

}
</script>